/**
 * Created by apple on 2017/6/27.
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  RefreshControl,
  TouchableOpacity
} from 'react-native';

import NavigationBar from './common/NaviagtionBar'
import Toast, {DURATION} from 'react-native-easy-toast'
let data = {
  "result": [
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
    {"email": "fsjljfslfjsf.163.com", "fullname": '李四李四李四李四李四'},
  ]
};

export default class ListView2 extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data.result),
      isLoading:true,
    }
    this.onLoad()
  }

  renderRow(item) {
    return <View style={styles.row}>

      <TouchableOpacity
        onPress={()=>{
          this.toast.show('你单了'+item.fullname,DURATION.LENGTH_SHORT)
        }}
      >

        <Text style={styles.text}>
          {item.email}
        </Text>
        <Text style={styles.text}>
          {item.fullname}
        </Text>
      </TouchableOpacity>
      <Toast

      />
    </View>
  }

  rednerSeparator(sectionID, rowID, adjacentRowHighlighted) {
    return <View key={rowID} style={styles.line}></View>

  }

  renderFooter() {
    return (
      <View>
        <Image style={{}} source={require("../res/images/ic_contacts@2x.png")}/>
      </View>
    )
  }
  onLoad(){
    setTimeout(()=>{
      this.setState({isLoading:false})
    },2000)
  }
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar
          title={'ListView'}
          style={{backgroundColor: "#ee6363"}}
        />
        <Text>
          我是listView组件
        </Text>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(item) => this.renderRow(item)}
          renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.rednerSeparator(sectionID, rowID, adjacentRowHighlighted)}
          renderFooter={() => this.renderFooter()}
          refreshControl = { <RefreshControl
            refreshing= {this.state.isLoading}
            onRefresh = {() =>this.onLoad()}
          /> }
        />
        <Toast
          ref={toast => this.toast = toast}
        />
      </View>
    )
  }


}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5ff'
  },
  text: {
    fontSize: 18
  },
  row: {
    height: 50
  },
  line: {
    height: 1,
    backgroundColor: "#000"
  }
});





